<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文章列表页面</title>

<link type="text/css" rel="stylesheet" href="../style/page.css"></link>
<style type="text/css">

</style>

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/page.js"></script>

<script type="text/javascript">
function pagination(pageIndex){
	var url = "article-list.do?pageHolder.pageIndex=" + pageIndex;			    
    window.location.href=url; 
}

$(function(){
	//操作成功 
	var result = '${result}';
	if(result){
		alert('操作成功');
	}
	//给删除和更新标签绑定事件
 	$("#article_title .add-article").bind("click",addArticle);
	$("#article_content .update-article").live("click",updateArticle);
	$("#article_content .delete-article").live("click",deleteArticle); 
	
});
function addArticle(){
	window.location.href = "show-add-article.do";
	
}
function updateArticle(){
	//调到更新文章的页面，根据id取出文章的基本信息，显示在更新页面
		var articleId =  $(this).attr('ref');
		var f = document.createElement('form');
		f.style.display = 'none'; 
		this.parentNode.appendChild(f);
		f.method = 'POST';
		f.action = "show-update-article.do";
		var s = document.createElement('input'); 
		s.setAttribute('type', 'hidden'); 
		s.setAttribute('name', 'articleId');
		s.setAttribute('value', articleId);
		f.appendChild(s);
		f.submit();  
}


function deleteArticle(){
 	//var userId = $('body').data('userId');
 	if (confirm('你确定要删除这篇文章吗？')) { 
	 	var articleId =  $(this).attr('ref');
	 	var param = {};
		param["articleId"] = articleId;
		if(articleId){
			$.get("delete-article.do",param,function(data){
				if(data.result){
					//移除删除了的用户信息
					$('.msg').remove();
					$('#'+articleId).after('<span style="color:red;font-size:14px;" class="msg">删除成功</span>');
					$('#'+articleId).remove();
				}
				else{
					alert('删除失败！ ');
				}
			});
		}else{
			alert('删除失败！ ');
		} 
 	};
	return false;
}

function preview(id){
	location.href = "article-preview.do?id="+id;
}

</script>


	
</head>
<body>
	<div id="wrapper">
		
		<div id="article_title">
			<h4>文章列表</h4>
			<div id="article_preview">
			    <img src="/images/icon_plus.gif"> 
			    <a href="###" class="add-article">发表新文章</a>
			 </div>
		</div>
		<div id="article_content">
			<table class="admin">
			  <colgroup>
			    <col width="400">
			    <col width="200">
			    <col width="100">
			    <col width="100">
			  </colgroup>
			  <thead>
			    <tr>
			      <td>标题</td>
			      <td>发表时间</td>
			      <td>来源</td>
			      <td>管理</td>
			    </tr>
			  </thead>
			  <tbody>
				<c:forEach var="article" items="${articleList }">
					<tr class="clearfix " id="${article.id }">
						<td class="dt_body"><a title="${article.title }" href="javascript:preview(${article.id})">${article.title }</a></td>
						<td class="dt_body"><fmt:formatDate value="${article.releaseDate }" type="date" timeStyle="full"/></td>
						<td class="dt_body">${fn:substring(article.source,0,12)}</td>
							<c:if test="${fn:length(article.title) > 12}">
										 	...
							</c:if>	
						<td class="dt_body">
							<a href="###" class="update-article" ref="${article.id }" title="编辑">
								<img src="../images/btn_edit.png" alt="编辑"/>
							</a>&nbsp;
							<a href="###" class="delete-article" ref="${article.id }" title="删除">
								<img src="../images/btn_delete.png" alt="删除"/>
							</a>
						</td>
							
					</tr>
				</c:forEach>
  			</tbody>
		</table>
			<c:if test="${pageHolder.pageCount>0}">
					<div class="pageBox">			   
						<p><script type="text/javascript">nav(${pageHolder.pageIndex},${pageHolder.pageCount},5,'pagination');</script></p>
					</div>
			</c:if>
	</div>
	
	</div>
</body>
</html>

